<template>
  <div class="a">
    <div class="box">
      <el-card class="f">
        <div style="text-align: right">
          <el-button class="l" @click="turn">返回</el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" offset="1">
            <div class="pic" id="myLine"></div>
          </el-col>
          <el-col :span="6">
            <div class="d">
              <img src="~@/assets/twodogs.jpg" style="height: 50%;width: 50%" />
            </div>
            <el-form :model="talentData" label-width="50%" class="c">
              <el-form-item label="姓名">
                <el-input v-model="talentData.name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-input v-model="talentData.sex"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-input v-model="talentData.birthdate"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="talentData.phoneNum"></el-input>
              </el-form-item>
              <el-form-item label="公司名称">
                <el-select v-model="talentData.basicSitu.companyName" placeholder="请选择就职公司">
                  <el-option label="ABC有限公司" value="1"></el-option>
                  <el-option label="华为" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="7" offset="1">
            <div class="pic2" id="myPie"></div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="e">
        <el-row>
          <span style="font-size: 15px">工作经历</span>
        </el-row>
        <el-row :gutter="20" class="g">
          <el-col :span="12" offset="1">
            <span style="font-size: 15px">基本情况</span>
          </el-col>
          <el-col :span="10">
            <span style="font-size: 15px">离职情况</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" offset="1">
            <el-card>
              <el-table
                :data="talentData.basicSitu"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="companyId"
                  label="公司代号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="companyName"
                  label="公司名称">
                </el-table-column>
                <el-table-column
                  prop="pos"
                  label="职务">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card>
              <el-input
                v-model="leftSitu" 
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                style="width: 100%"
              ></el-input>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="g" offset="1">
          <el-col :span="12" offset="1">
            <span style="font-size: 15px">荣誉</span>
          </el-col>
          <el-col :span="10">
            <span style="font-size: 15px">重大违纪</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" offset="1">
            <el-card>
              <el-table
                  :data="talentData.honors"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="honorName"
                    label="获奖/技能名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="honorTime"
                    label="获奖时间"
                    width="180">
                  </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card>
              <el-table
                  :data="talentData.punishMent"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="违纪情况"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="违纪登记时间"
                    width="180">
                  </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 1%">
          <el-col :span="10" offset="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </el-col>
          <el-col :span="8" offset="4">
            <el-button type="primary" class="h" style="width: 150px" @click="repair">修改个人基本信息</el-button>
            <el-button type="primary" class="h" style="width: 60px" @click="state">申诉</el-button>
            <el-button type="primary" class="h" style="width: 60px" @click="load">下载</el-button>
          </el-col>
        </el-row>
      </el-card>
      <!-- 修改个人基本信息对话框 -->
      <el-dialog
        title="修改个人信息"
        :visible.sync="changeBasicInfor"
        width="30%"
        top ="15%">
        <span style="font-size: 15px;">手机号：</span>
        <el-input style="width: 200px;" placeholder="15462894583" clearable="true" v-model="pNum"></el-input>
        <input type="submit" class="i" @click="send" value="发送验证码" />
        <el-input style="width: 200px;margin-left: 60px;margin-top: 10px;"
           placeholder="请输入收到的验证码" clearable="true" v-model="idenNum">
        </el-input>
        <div slot="footer" class="j">
          <el-button @click="changeBasicInfor = false">取 消</el-button>
          <el-button type="primary" @click="repair_jump">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改个人基本信息表单 -->
      <el-dialog
        title="修改个人信息表单"
        :visible.sync="changeBasicInforForm"
        width="50%"
        top ="10%">

        <div class="changeBox">
          <el-row :gutter="15">
            <el-col :span="4" offset="2">
                <el-row>
                  <img src="~@/assets/dog.jpg" style="width: 170px;height: 200px" />
                </el-row>
                <el-row>
                  <el-button type="primary">更改图片</el-button>
                </el-row>
            </el-col>
            <el-col :span="11" offset="3">
              <el-form :model="talentData" label-width="80px" class="c">
                <el-form-item label="姓名">
                  <el-input v-model="talentData.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-input v-model="talentData.sex"></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-input v-model="talentData.birthdate"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input v-model="talentData.phoneNum"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="n">
            <input type="button" class="m" value="确认修改" @click="turnback" />
          </div>
        </div>

      </el-dialog>
      <!-- 申述对话框 -->
      <el-dialog
        title="申述"
        :visible.sync="stateInfor"
        width="30%"
        top ="15%">
        <span style="font-size: 15px;">手机号：</span>
        <el-input style="width: 200px;" placeholder="15462894583" clearable="true" v-model="pNum"></el-input>
        <el-button type="parimary" class="i" @click="send">发送验证码</el-button>
        <el-input style="width: 200px;margin-left: 60px;margin-top: 10px;"
           placeholder="请输入收到的验证码" clearable="true" v-model="idenNum">
        </el-input>
        <div slot="footer" class="j">
          <el-button @click="stateInfor = false">取 消</el-button>
          <el-button type="primary" @click="state_jump">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 申述信息表单 -->
      <el-dialog
       title="申述信息表单"
       :visible.sync="stateInforForm"
       width="50%"
       top="10%">

          <div class="stateBox">
            <el-row :gutter="20">
              <el-col :span="5" offset="2">
                <el-card class="b">
                  <el-radio v-model="reason" label="1" style="font-size: 20px;">出勤率</el-radio>
                  <el-radio v-model="reason" label="2">绩效完成情况</el-radio>
                  <el-radio v-model="reason" label="3">荣誉</el-radio>
                  <el-radio v-model="reason" label="4">重大违纪</el-radio>
                </el-card>
              </el-col>
              <el-col :span="16">
                <el-card class="c">
                  <span class="d">原因</span>
                  <el-input style="width: 100%; margin-top: 20px;margin-bottom: 20px;" type="textarea" :rows="5" placeholder="请输入内容" v-model="prove"></el-input>
                  <span class="d">相关证明材料</span>
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button style="margin-top: 15px;" size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-card>
              </el-col>
            </el-row>
            <div class="n">
              <input type="submit" value="提交申述" class="m" @click="submit" />
            </div>
          </div>
          
      </el-dialog>
      <!-- 下载对话框 -->
      <el-dialog
        title="下载"
        :visible.sync="loadInfor"
        width="30%"
        top ="15%">
        <span style="font-size: 15px;">手机号：</span>
        <el-input style="width: 200px;" placeholder="15462894583" clearable="true" v-model="pNum"></el-input>
        <el-button type="parimary" class="i" @click="send">发送验证码</el-button>
        <el-input style="width: 200px;margin-left: 60px;margin-top: 10px;"
           placeholder="请输入收到的验证码" clearable="true" v-model="idenNum">
        </el-input>
        <div slot="footer" class="j">
          <el-button @click="loadInfor = false">取 消</el-button>
          <el-button type="primary" @click="load_jump">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pNum: '',
      idenNum: '',
      //修改基本信息
      changeBasicInfor: false,
      changeBasicInforForm: false,
      //申述
      stateInfor: false,
      stateInforForm: false,
      reason: '1',
      prove: '你好',
      //下载成为PDF
      loadInfor: false,

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      talentData:
        {
          name: '小明',
          sex: '男',
          birthdate: '1991.2.3',
          phoneNum: '13532675892',
          basicSitu: [
          {
            date: '2019.06-2020.08',
            companyId: '110',
            companyName: 'ABC有限公司',
            pos: '前端工程师'
          }],
          leftSitu: '',
          honors: [
            {
              honorName: '年度最佳员工',
              honorTime: '2019年6月1日'
            },
            {
              honorName: '十佳青年',
              honorTime: '2020年9月25日'
            }
          ],
          punishMent: [
            {
              name: '严重迟到',
              date: '2019年6月1日'
            },
            {
              name: '延迟旷课',
              date: '2020年9月25日'
            }
          ]
        }
    }
  },
  mounted(){
      this.drawLine();
      this.drawPie();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    drawLine() {
    // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myLine'))
      // 绘制图表
      myChart.setOption({
          // title: { text: '每月出勤次数' },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['2019年度出勤次数','2020年度出勤次数']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['一月','二月','三月','四月','五月','六月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '2019年度出勤次数',
              type: 'line',
              data: [5, 20, 27, 10, 10, 20]
          },
          {
              name: '2020年度出勤次数',
              type: 'line',
              data: [8, 25, 22, 13, 16, 15]
          }
          ]
        // title: {
        //     text: '折线图堆叠'
        // },
        // tooltip: {
        //     trigger: 'axis'
        // },
        // legend: {
        //     data: ['邮件营销']
        // },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        // toolbox: {
        // },
        // xAxis: {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        // },
        // yAxis: {
        //     type: 'value'
        // },
        // series: [
        //     {
        //         name: '邮件营销',
        //         type: 'line',
        //         data: [120, 132, 101, 134, 90, 230, 210]
        //     }
        // ]
      });
    },
    drawPie() {
    // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myPie'))
      // 绘制图表
      myChart.setOption({
      // title: {
      //     text: '绩效完成对比图'
      // },
      legend: {   // 标题组件，暂时调用失败
          data: ['一月份绩效情况', '二月份绩效情况']
      },
      radar: {
          // shape: 'circle',
          name: {
              textStyle: {
                  color: '#fff',
                  backgroundColor: '#999',
                  borderRadius: 3,
                  padding: [3, 5]
              }
          },
          indicator: [
              { name: '客户量', max: 6500},
              { name: '销售额', max: 16000},
              { name: '销售数量', max: 30000},
              { name: '整理库存数', max: 38000},
          ]
      },
      tooltip: {},
      series: [{
          name: '一月份 vs 二月份（Budget vs spending）',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
              {
                  value: [4300, 10000, 28000, 35000],
                  name: '一月份绩效情况'
              },
              {
                  value: [5000, 14000, 28000, 31000],
                  name: '二月份绩效情况'
              }
          ]
      }]
        });
    },
    repair() {
      this.changeBasicInfor=true;
    },
    repair_jump() {
      this.changeBasicInfor=false;
      this.changeBasicInforForm=true;
    },
    state() {
      this.stateInfor=true;
    },
    state_jump() {
      this,this.stateInfor=false;
      this.stateInforForm=true;
    },
    load() {
      this.loadInfor=true;
    },
    load_jump() {
      this.$message({
        type: 'success',
        message: '生成PDF成功，并且放在了本地文件夹中'
      });
      this.loadInfor=false;
    },
    send() {
      this.$message({
          message: '验证码已成功发送，请注意查收',
          type: 'success'
        });
    },
    turn () {
      this.$router.push('/csLogin')
    },
    turnback() {
      this.$message({
        type: 'success',
        message: '修改信息成功'
      })
      this.changeBasicInforForm=false;
    },
    submit() {
      this.$message({
        type: 'success',
        message: '申述成功，请等候通知'
      });
      this.stateInforForm=false;
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item {
  margin-bottom: 5px;
}
.box {
  background-color:#FFFFFF;
  height: 96%;
  width: 100%;
  position: relative;
  left: 5%;
}
.stateBox {
  width: 100%;
  height: 100%;
  background-color: rgb(253, 253, 253);
  border-width: 10px;
  border-radius: 20px;
}
.pic {
  background:#ffffff;
  height: 350px;
  width: 400px;
}
.pic2 {
  background:#ffffff;
  height: 350px;
  width: 500px;
}
.box input[type = "submit"]:hover {
 background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 font-size: x-large;
}
.a {
  height: 110%;
  width: 100%;
}
.b {
  width: 150px;
  font-size: 20px;
}
.c {
  width: 100%;
}
.d {
  text-align: right;
  width: 100%;
}
.e {
  height: 65%;
  width: 90%;
  background-color: #abd7eb;
  margin: 0px;
  border-width: 2px;

}
.f {
  height: 55%;
  width: 90%;
}
.g {
 margin-top: 10px; 
 margin-bottom: 5px;
}
.h {
  margin-top: 10px;
  margin-right: 10px;
}
.i {
  height: 50px;
  width: 25%;
  margin-left: 30px;
  border: 2px solid #0f6f7c;
  font-size: 12px;
  cursor: pointer;
}
.i:hover {
  background-image: linear-gradient(120deg, #7c14dd 0%, #2b78c5 100%);
  font-size: large;
}
.j {
  position: relative;
  top: 0%;
  text-align: right;
  margin: 20px;
}
.k {
  position: relative;
  text-align: right;
}
.l {
  font-size: 18px;
  color: #8ec5fc;
  background: none;
}
.m {
  font-size: 25px;
  background-color: rgb(253, 255, 255);
  cursor: pointer;
}
.m:hover {
 background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 font-size: x-large;
}
.n {
  text-align: center;
  position: relative;
  top: 20%;
  margin-top: 10px;
}
.o {
  text-align: center;
}
.p {  
  width: 50px;
  height: 100px;
  background-color: rgb(249, 252, 251);
  margin-top: 20px;
  font-size: 20px;
  size: max();
}
</style>